<template>
  <div class="container" id="printContent">
    <div class="header">
      <h1>桂林电子科技大学科技园退租审批表</h1>
      <div class="no">NO.</div>
    </div>

    <table>
      <colgroup>
        <col style="width: 12%">
        <col style="width: 8%">
        <col style="width: 8%">
        <col style="width: 15%">
        <col style="width: 5%">
        <col style="width: 5%">
        <col style="width: 10%">
        <col style="width: 12%">
        <col style="width: 15%">
        <col style="width: 10%">
      </colgroup>

      <tr>
        <td class="title-cell">申请企业</td>
        <td colspan="5">
          <input type="text" v-model="form.enterpriseName"
                 style="width:100%; border:none;text-align:center;">
        </td>
        <td class="title-cell">申请日期</td>
        <td colspan="3">
          <input type="text" v-model="form.applicationDate"
                 style="width:100%; border:none; text-align:center;">
        </td>
      </tr>

      <tr>
        <td class="title-cell">房号</td>
        <td colspan="2">
          <input type="text" v-model="form.roomNumber"
                 style="width:100%; border:none; text-align:center;">
        </td>
        <td class="title-cell">经办人</td>
        <td colspan="2">
          <input type="text" v-model="form.contactPerson"
                 style="width:100%; border:none; text-align:center;">
        </td>
        <td class="title-cell">联系方式</td>
        <td colspan="3">
          <input type="text" v-model="form.contactMethod"
                 style="width:100%; border:none; text-align:center;">
        </td>
      </tr>

      <tr>
        <td class="title-cell" style="height: 40px;">退租原因</td>
        <td colspan="9">
          <input type="text" v-model="form.exitReason"
                 style="width:100%; border:none; text-align:left;">
        </td>
      </tr>

      <tr>
        <td class="title-cell">申请退租日期</td>
        <td colspan="9">
          <input type="text" v-model="form.exitDate"
                 style="width:100%; border:none; text-align:center;">
        </td>
      </tr>

      <tr>
        <td rowspan="3" class="title-cell">退款账户明细</td>
        <td class="title-cell">户名</td>
        <td colspan="8">
          <input type="text" v-model="form.refundAccountName"
                 style="width:100%; border:none; text-align:center;">
        </td>
      </tr>

      <tr>
        <td class="title-cell">账号</td>
        <td colspan="8">
          <input type="text" v-model="form.refundAccountNumber"
                 style="width:100%; border:none; text-align:center;">
        </td>
      </tr>

      <tr>
        <td class="title-cell">开户行</td>
        <td colspan="8">
          <input type="text" v-model="form.refundBank"
                 style="width:100%; border:none; text-align:center;">
        </td>
      </tr>
    </table>

    <div class="promise-content">
      <p>本公司承诺以上填报内容真实有效，截止至申请退租日期承诺做到以下两点：</p>
      <p>1、清空场地内所有物品并将原租用场地打扫干净；</p>
      <p>2、将租用场地的钥匙交给科技园相关负责老师。</p>
      <p>如超过申请退租日期1个月仍未将原租用场地清空，则视为自动放弃场地内的所有物品的所有权，桂林电子科技大学科技园有权对其进行处置。</p>
      <p>特此承诺。</p>
    </div>

    <div class="signature">
      <div style="display: flex; align-items: center; margin-bottom: 10px;">
        <p style="margin-right: 10px; display: inline-block;">承诺人（公司法人）：</p>
        <input type="text" v-model="form.applicantSignature"
               style="width: 200px; border: none; text-align: right;">
      </div>
      <div style="display: flex; align-items: center; margin-bottom: 10px;">
        <p style="margin-right: 10px; display: inline-block;">（公司盖章）</p>
      </div>
      <div style="display: flex; align-items: center;">
        <p style="margin-right: 10px; display: inline-block;">日期：</p>
        <input type="text" v-model="form.commitmentDate"
               style="width: 200px; border: none; text-align: center;">
      </div>
    </div>

    <table style="margin-top: 40px;">
      <colgroup>
        <col style="width: 12%">
        <col style="width: 8%">
        <col style="width: 8%">
        <col style="width: 15%">
        <col style="width: 5%">
        <col style="width: 5%">
        <col style="width: 10%">
        <col style="width: 12%">
        <col style="width: 15%">
        <col style="width: 10%">
      </colgroup>
      <tr>
        <td colspan="10" class="title-cell">科技园审批（以下内容由科技园填写）：</td>
      </tr>

      <tr>
        <td class="title-cell">履约保证金</td>
        <td class="title-cell">￥</td>
        <td colspan="2">
          <input type="number" step="0.01" v-model="form.deposit"
                 min="0"      style="width:100%; border:none; text-align:center;">
        </td>
        <td colspan="2" class="title-cell">大写：</td>
        <td colspan="4">
          <input type="text" v-model="form.depositChinese"
                 style="width:100%; border:none; text-align:center;" readonly>
        </td>
      </tr>

      <tr>
        <td class="title-cell">应缴款</td>
        <td colspan="2" class="title-cell">房屋租赁费￥</td>
        <td colspan="1">
          <input type="number" step="0.01" v-model="form.rentalFee"
                 min="0"   style="width:100%; border:none; text-align:center;">
        </td>
        <td colspan="2" class="title-cell">大写：</td>
        <td colspan="4">
          <input type="text" v-model="form.rentalFeeChinese"
                 style="width:100%; border:none; text-align:center;" readonly>
        </td>
      </tr>

      <tr>
        <td class="title-cell">应退款</td>
        <td class="title-cell">￥</td>
        <td colspan="2">
          <input type="number" step="0.01" v-model="form.refundAmount"
                 min="0" style="width:100%; border:none; text-align:center;">
        </td>
        <td colspan="2" class="title-cell">大写：</td>
        <td colspan="4">
          <input type="text" v-model="form.refundAmountChinese"
                 style="width:100%; border:none; text-align:center;" readonly>
        </td>
      </tr>

      <tr>
        <td class="title-cell">需补交款</td>
        <td class="title-cell">￥</td>
        <td colspan="2">
          <input type="number" step="0.01" v-model="form.additionalPayment"
                 min="0"    style="width:100%; border:none; text-align:center;">
        </td>
        <td colspan="2" class="title-cell">大写：</td>
        <td colspan="4">
          <input type="text" v-model="form.additionalPaymentChinese"
                 style="width:100%; border:none; text-align:center;" readonly>
        </td>
      </tr>


      <tr>
        <td class="title-cell">审批</td>
        <td class="title-cell">经办人</td>
        <td colspan="2">
          <input type="text" v-model="form.handler"
                 style="width:100%; border:none; text-align:center;">
        </td>
        <td colspan="3" class="title-cell">办公室主任核签</td>
        <td colspan="3">
          <input type="text" v-model="form.officeDirectorSignature"
                 style="width:100%; border:none; text-align:center;">
        </td>
      </tr>
      <tr>
        <td colspan="3" class="title-cell">部门负责人</td>
        <td colspan="7">
          <input type="text" v-model="form.departmentHeadSignature"
                 style="width:100%; border:none; text-align:center;">
        </td>
      </tr>
    </table>

    <div class="print-controls">
      <button class="print-btn" @click="printTable()">打印表格</button>
      <p class="print-tip">打印前请确保：1. 浏览器设置中启用了背景图形打印 2. 纸张方向为纵向</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import {reactive, onMounted, watch , nextTick} from 'vue';
import { ElMessage } from 'element-plus';
import { getexitApplicationForm } from '@/api/personal-center';
import { useRoute } from 'vue-router';

const route = useRoute();
const form = reactive({
  id: null,
  enterpriseName: '',
  userId: null,
  applicationDate: null,
  roomNumber: '',
  contactPerson: '',
  contactMethod: '',
  exitReason: '',
  exitDate: null,
  refundAccountName: '',
  refundAccountNumber: '',
  refundBank: '',
  applicantSignature: '',
  commitmentDate: null,
  deposit: null,
  depositChinese: '',
  rentalFee: null,
  rentalFeeChinese: '',
  refundAmount: null,
  refundAmountChinese: '',
  additionalPayment: null,
  additionalPaymentChinese: '',
  handler: '',
  officeDirectorSignature: '',
  departmentHeadSignature: ''
});

// 页面加载时获取用户草稿
onMounted(() => {
  const id = route.query.id;
  if (id) {
    getUserDraft(Number(id)).then(() => {
      nextTick(() => {
        setTimeout(() => {
          window.print();
        }, 500);
      });
    });
  }
});
// 数字转大写金额
const toChineseCurrency = (num: number): string => {
  if (num === 0) return '零元整';
  const chineseNum = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖'];
  const chineseUnit = ['', '拾', '佰', '仟'];
  const bigUnit = ['', '万', '亿', '兆'];
  const result = [];
  let fraction = ['角', '分'];
  let numStr = num.toString().split('.');
  let integerPart = numStr[0];
  let fractionPart = numStr.length > 1 ? numStr[1] : '';
  let temp = '';
  for (let i = 0; i < integerPart.length; i++) {
    let n = integerPart.length - i - 1;
    let unit = '';
    if (n % 4 === 0 && n !== 0 && i !== 0) {
      unit = bigUnit[n / 4 - 1];
    } else if (n % 4 > 0) {
      unit = chineseUnit[n % 4];
    }
    if (integerPart[i] !== '0') {
      temp = chineseNum[parseInt(integerPart[i])] + unit;
    } else if (temp !== '零') {
      temp = '零';
    }
    if (temp !== '零' || result[result.length - 1] !== '零') {
      result.push(temp);
    }
  }
  if (result[result.length - 1] === '零') {
    result.pop();
  }
  result.push('元');
  for (let i = 0; i < fractionPart.length && i < 2; i++) {
    if (fractionPart[i] !== '0') {
      result.push(chineseNum[parseInt(fractionPart[i])] + fraction[i]);
    }
  }
  if (result[result.length - 1] === '元') {
    result.push('整');
  }
  return result.join('');
};

// 监听数字字段的变化并更新大写金额
watch(() => form.deposit, (newValue) => {
  if (newValue !== null && newValue !== undefined) {
    form.depositChinese = toChineseCurrency(newValue);
  }
});

watch(() => form.rentalFee, (newValue) => {
  if (newValue !== null && newValue !== undefined) {
    form.rentalFeeChinese = toChineseCurrency(newValue);
  }
});

watch(() => form.refundAmount, (newValue) => {
  if (newValue !== null && newValue !== undefined) {
    form.refundAmountChinese = toChineseCurrency(newValue);
  }
});

watch(() => form.additionalPayment, (newValue) => {
  if (newValue !== null && newValue !== undefined) {
    form.additionalPaymentChinese = toChineseCurrency(newValue);
  }
});
const getUserDraft = async (id: number) => {
  try {
    const res = await getexitApplicationForm(id);
    if (res.code === 200) {

      Object.assign(form, res.data);
      // 等待数据加载完毕后直接调用打印方法
      // printTable()
    }
  } catch (error) {
    console.error('获取报表数据失败:', error);
    ElMessage.error('获取报表数据失败');
  }
};

const printTable = () => {
  window.print();
};
</script>

<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Microsoft YaHei", Arial, sans-serif;
}

body {
  padding: 20px;
  background-color: #f5f5f5;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  background-color: white;
  padding: 30px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.header {
  text-align: center;
  margin-bottom: 30px;
}

.header h1 {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 10px;
  letter-spacing: 2px;
}

.header .no {
  text-align: right;
  font-size: 16px;
  margin-bottom: 20px;
}

table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 14px;
}

td {
  border: 1px solid #000;
  height: 30px;
  padding: 4px 6px;
  vertical-align: top;
  word-break: break-all;
}

.promise-content {
  line-height: 1.8;
  text-indent: 2em;
  margin-top: 20px;
}

.signature {
  text-align: center;
  padding-right: 20px;
  margin-top: 20px;
}

.page-break {
  page-break-after: always;
}

.print-controls {
  text-align: center;
  margin: 20px 0;
  padding: 15px;
  background: #e9f7fe;
  border-radius: 5px;
}

.print-btn {
  background: #1e88e5;
  color: white;
  border: none;
  padding: 10px 25px;
  font-size: 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s;
}

.print-btn:hover {
  background: #0d47a1;
}

.print-tip {
  margin-top: 10px;
  color: #d32f2f;
  font-size: 14px;
}

@media print {
  body {
    padding: 0;
    background: none;
  }

  .container {
    box-shadow: none;
    padding: 0;
    max-width: 100%;
    margin: 0;
  }

  .print-controls {
    display: none;
  }
}
</style>